<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>栏目管理</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="./css/x-admin.css" media="all" />
    <style type="text/css">
        .open{
            border:1px solid #ccc;
            padding: 0 3px 0 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>栏目管理</cite></a> <a><cite>栏目列表</cite></a> </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="banner_add('添加栏目','cate-add.html','1200','800')"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px">共有数据：<span class="layui-badge">66</span> 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr pid="0">
            <th style="text-align: center;"> 伸缩 </th>
            <th> <input type="checkbox" name="" value="" /> </th>
            <th> ID </th>
            <th> 栏目名称 </th>
            <th> 栏目副标题 </th>
            <th> 关键词 </th>
            <th> 栏目缩略图 </th>
            <th> 链接 </th>
            <th> 描述 </th>
            <th> 显示状态 </th>
            <th> 操作 </th>
        </tr>
        </thead>
        <tbody id="x-img">

        <tr id="1" pid="0">
            <td align="center"><span class="open">+</span></td>
            <td> <input type="checkbox" value="1" name="" /> </td>
            <td> 1 </td>

            <td> 栏目
                <a href="javascript:;" style="float: right;" class="layui-btn" onclick="adds('添加栏目','cate-add.html','1','1200','800')"><i class="layui-icon"></i>添加子栏目</a>
            </td>
            <td> 栏目 </td>
            <td> 栏目 </td>
            <td> <img src="./images/logo.png" width="200" height="100" alt="" /> </td>
            <td> www.baidu.com</td>
            <td> 描述</td>

            <td class="td-status"> <span class="layui-btn layui-btn-normal "> 显示 </span> </td>

            <td class="td-manage">

                <a style="text-decoration:none" onclick="cate_stop(this,'1','0')" href="javascript:;" title="显示"> <i class="layui-icon"></i> </a>

                <a title="编辑" href="javascript:;" onclick="cate_edit('编辑','cate-add.html','1','1200','800')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a>
                <a title="删除" href="javascript:;" onclick="cate_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a>
            </td>
        </tr>

        </tbody>
    </table>
    <div id="page"></div>
</div>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script src="./js/x-layui.js" charset="utf-8"></script>
<script src="./js/jquery.min.js" charset="utf-8"></script>
<script>
    layui.use(['laydate','element','laypage','layer'], function(){
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层

        //以上模块根据需要引入

        layer.ready(function(){ //为了layer.ext.js加载完毕再执行
            layer.photos({
                photos: '#x-img'
                //,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
            });
        });

    });

    //批量删除提交
    function delAll () {
        layer.confirm('确认要删除吗？',{icon:3,title:'提示信息'},function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
        });
    }
    /*添加*/
    function banner_add(title,url,w,h){
        x_admin_show(title,url,w,h);
    }
    function adds(title,url,id,w,h){

        url=url+"?id="+id;
        x_admin_show(title,url,w,h);
    }
    /*停用*/
    function cate_stop(obj,id,e){
        layer.confirm('确认不显示吗？',function(index){
            $.ajax({
                type:"post",
                url:"",
                data:{id:id,status:e},
                dataType:"json",
                success:function(data)
                {
                    //console.log(data);
                    if(data.status==1)
                    {
                        //发异步把用户状态进行更改
                        $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="admin_start(this,id)" href="javascript:;" title="启用"><i class="layui-icon">&#xe62f;</i></a>');
                        $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-disabled layui-btn-mini">不显示</span>');
                        $(obj).remove();
                        layer.msg(data.info,{icon: 6,time:1000});
                        setTimeout(function(){
                            window.location.reload();
                        },1000);return false;
                    }
                    else
                    {
                        layer.msg(data.info,{icon: 5,time:1000});return false;
                    }
                }
            });

        });
    }

    /*启用*/
    function cate_start(obj,id,e){
        layer.confirm('确认要显示吗？',function(index){
            $.ajax({
                type:"post",
                url:"",
                data:{id:id,status:e},
                dataType:"json",
                success:function(data)
                {
                    if(data.status==1)
                    {
                        //发异步把用户状态进行更改
                        $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="banner_stop(this,id)" href="javascript:;" title="不显示"><i class="layui-icon">&#xe601;</i></a>');
                        $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">已显示</span>');
                        $(obj).remove();
                        layer.msg(data.info,{icon: 6,time:1000});
                        setTimeout(function(){
                            window.location.reload();
                        },1000);return false;
                    }
                    else
                    {
                        layer.msg(data.info,{icon: 5,time:1000});return false;
                    }
                }
            });

        });
    }
    // 编辑
    function cate_edit (title,url,id,w,h) {
        url=url+"?id="+id;
        x_admin_show(title,url,w,h);
    }
    /*删除*/
    function cate_del(obj,id){
        layer.confirm('确认要删除吗？',{icon:3,title:'提示信息'},function(index){
            $.ajax({
                type:"post",
                url:"",
                data:{id:id},
                dataType:"json",
                success:function(data)
                {
                    console.log(data);
                    if(data.status==1)
                    {
                        //发异步删除数据
                        $(obj).parents("tr").remove();
                        layer.msg(data.info,{icon:6,time:1000});
                        setTimeout(function(){
                            window.location.reload();
                        },1000);return false;
                    }
                    else
                    {
                        layer.msg(data.info,{icon:5,time:1000});return false;
                    }
                }
            });

        });
    }

    //栏目伸缩状态js
    $('tr[pid!=0]').hide();
    $('.open').click(function(){
        var id=$(this).parents('tr').attr('id');//获取他父级的父级的id值
        if($(this).text()=='+'){
            $(this).text('-');
            $('tr[pid='+id+']').show();
        }else{
            $(this).text('+');
            $.ajax({
                type:"post",
                dataType:"json",
                data:{cateid:id},
                url:"",
                success:function(data){
                    //
                    var sonids=[];
                    var idsobj=$('tr[pid!=0]');
                    idsobj.each(function(k,v){
                        sonids.push($(this).attr('id'));
                    });
                    //alert(data);return false;
                    $.each(data,function(k,v){
                        //alert(v);return false;
                        if($.inArray(v,sonids)){
                            //
                            /*for (var i=0;i<sonids.length;i++)
                            {
                            $('tr[id='+sonids[i] +']').hide();
                            $('tr[id='+sonids[i]+']').find('span:first').text('+');
                            }*/
                            $('tr[pid='+v+']').hide();
                            $('tr[pid='+v+']').find('span:first').text('+');

                        }
                    });
                }
            })

        }
    });
</script>
</body>
</html>